<template>
  <div id="original">
    <v-touch v-on:swipeleft="swiperleft"  v-on:swiperight="swiperright" class="wrapper" style="touch-action: pan-y!important;">
      <mt-swipe :style="{background: swipeColor[index]}" class="swipe" @change="handleChange" :stop-propagation="true" :prevent="true":show-indicators="false" :auto="4000">
      <mt-swipe-item class="swipe-item" >
        <img :src="$store.state.comic[0].imgUrl" alt="">
      </mt-swipe-item>
      <mt-swipe-item class="swipe-item" >
        <img :src="$store.state.comic[1].imgUrl" alt="">
      </mt-swipe-item>
      <mt-swipe-item class="swipe-item" >
        <img :src="$store.state.comic[2].imgUrl" alt="">
      </mt-swipe-item>
    </mt-swipe>

      <div class="comic">
      <div class="comic-tit" >
        <p>{{comicTit[0]}}</p>
        <div>查看全部 <img class="arr" src="../../../assets/imgs/homePage/箭头.png" alt=""></div>
      </div>
      <div class="comic-bar" v-if="$store.state.states">
        <div v-for="(item,index) in recommendComic" :key="index" @click="detail(item)">
          <img :src="item.imgUrl" alt="">
          <h3>{{item.name}}</h3>
          <p>更新至{{item.beUpdateTo}}话</p>
        </div>
      </div>
      <div class="cut" @click="recommendC(6)">
        <img src="../../../assets/imgs/detail/刷新.png" alt="">
        换一批
      </div>
    </div>

      <div class="comic">
      <div class="comic-tit" >
        <p>{{comicTit[1]}}</p>
        <div>查看全部 <img class="arr" src="../../../assets/imgs/homePage/箭头.png" alt=""></div>
      </div>
      <div class="comic-bar" v-if="$store.state.states">
        <div v-for="(item,index) in recommendComic2" :key="index" @click="detail(item)">
          <img :src="item.imgUrl" alt="">
          <h3>{{item.name}}</h3>
          <p>更新至{{item.beUpdateTo}}话</p>
        </div>
      </div>
      <div class="cut" @click="recommendC2(6)">
        <img src="../../../assets/imgs/detail/刷新.png" alt="">
        换一批
      </div>
    </div>

      <div class="comic">
      <div class="comic-tit" >
        <p>{{comicTit[2]}}</p>
        <div>查看全部 <img class="arr" src="../../../assets/imgs/homePage/箭头.png" alt=""></div>
      </div>
      <div class="comic-bar" v-if="$store.state.states">
        <div v-for="(item,index) in recommendComic3" :key="index" @click="detail(item)">
          <img :src="item.imgUrl" alt="">
          <h3>{{item.name}}</h3>
          <p>更新至{{item.beUpdateTo}}话</p>
        </div>
      </div>
      <div class="cut" @click="recommendC3(6)">
        <img src="../../../assets/imgs/detail/刷新.png" alt="">
        换一批
      </div>
    </div>
    </v-touch>
  </div>
</template>

<script>
  export default {
    name: "Free",
    data(){
      return{
        index:0,
        swipeColor:[
          'linear-gradient(to bottom,#7C6460,#FFFFFF)',
          'linear-gradient(to bottom,#9F90A1,#FFFFFF)',
          'linear-gradient(to bottom,#CAAFA1,#FFFFFF)'],
        comicTit:['高分番剧作品','四月番抢先看','重温！经典番原作'],
        recommendComic:[],
        recommendComic2:[],
        recommendComic3:[]
      }
    },
    created(){
      this.recommendC(6)
      this.recommendC2(6)
      this.recommendC3(6)
    },
    methods:{
      swiperleft: function () {
        this.$router.push({'path': '/bookrack'});
      },
      swiperright: function () {
        this.$router.push({'path': '/find/villain'});
      },
      recommendC(sum){
        this.recommendComic = [];
        for (var i = 0; i < sum; i++) {
          var num = Math.round(Math.random()*(this.$store.state.comic.length-1))
          this.recommendComic.push(this.$store.state.comic[num])
        }
      },
      recommendC2(sum){
        this.recommendComic2 = [];
        for (var i = 0; i < sum; i++) {
          var num = Math.round(Math.random()*(this.$store.state.comic.length-1))
          this.recommendComic2.push(this.$store.state.comic[num])
        }
      },
      recommendC3(sum){
        this.recommendComic3 = [];
        for (var i = 0; i < sum; i++) {
          var num = Math.round(Math.random()*(this.$store.state.comic.length-1))
          this.recommendComic3.push(this.$store.state.comic[num])
        }
      },
      detail(obj){
        // console.log(obj);
        this.$router.push({name:'Detail',query:obj})
      },
      handleChange(index) {
        this.index = index
        // console.log(index);
      }
    }
  }
</script>

<style lang="less">
@import "../../../assets/css/find/original2";
</style>
